
<template>
  <div class="resource-main-box new-page">
    <a-form-model layout="inline" :model="search" class="comm-search-f" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">

      <!-- 筛选条件与查询 -->
      <a-form-model-item label="">
        <airModel v-model="search.model" />
      </a-form-model-item>
      <!-- 故障码 -->
      <a-form-model-item label="">
        <a-input
          v-model="search.param"
          placeholder="名称"
        />
      </a-form-model-item>

      <!-- 是否发送邮邮件或sms -->
      <a-form-model-item class="f-1-i">
        <a-button type="default" ghost :loading="listByParamLoading" @click="resetSearchHandler">
          重置
        </a-button>
        <a-button type="primary" class="ml-15" :loading="listByParamLoading" @click="changeTable({ current: 1 });">
          查询
        </a-button>

      </a-form-model-item>
    </a-form-model>

    <div class="pt-16 pl-16 pr-16 pb-16">
      <a-button type="primary" ghost :loading="listByParamLoading" @click="addVisible=true">
        新增
      </a-button>
      <a-button v-if="$route.query.m" type="link" class="ml-15" @click="goBackFm">
        返回
      </a-button>
    </div>

    <!-- table -->

    <a-table
      class="table-border"
      :columns="columns"
      size="middle"
      :data-source="listByParamList"
      :row-key="(row,index) => row.id"
      :pagination="{
        showTotal:(total)=> `共 ${total} 条数据`,
        showSizeChanger: true,//设置每页显示数据条数
        showQuickJumper: true,
        size:'big',
        current:paginationOptions.pageNum,
        pageSize:paginationOptions.pageSize,
        total:paginationOptions.total
      }"
      :loading="listByParamLoading"
      @change="changeTable"
    />

    <!-- add -->
    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="addRepUplinkDestinationLoading"
      class="rt-i-modal"
      :dialog-style="{height:'715px'}"
      centered
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">{{ addTitle }}上行报文模板</div>
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
      >

        <a-form-model-item label="名称" prop="name">
          <a-input
            v-model="addForm.name"
            placeholder="名称"
            class="input-type-o"
            style="width: 100%"
          />
        </a-form-model-item>

        <a-form-model-item label="机型" prop="model">
          <airModel v-model="addForm.model" class="input-type-o" />
        </a-form-model-item>

        <a-form-model-item prop="configId">
          <span slot="label">配置ID<span class="text-color-9ea5b2 fs-12">选填</span></span>
          <a-input
            v-model="addForm.configId"
            placeholder="配置ID"
            style="width: 100%"
            class="input-type-o"
          />
        </a-form-model-item>
        <a-form-model-item label="SMI标签" prop="smi">
          <a-select
            v-model="addForm.smi"
            show-arrow
            style="minWidth: 130px"
            class="input-type-o"
            placeholder="一级分类"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in firstClassClassificationList" :key="selectItem.id" :value="selectItem.name">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item v-if="addForm.smi==='ENG'" label="modifier" prop="modifier">
          <a-select
            v-model="addForm.modifier"
            show-arrow
            style="minWidth: 130px"
            placeholder="modifier"
            class="input-type-o"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="item in modifierArr" :key="item.name" :value="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item> -->
        <a-form-model-item label="消息内容" prop="message">
          <a-textarea
            v-model="addForm.message"
            class="input-type-o"
            style="width: 100%"
            placeholder="消息内"
            :auto-size="{ minRows: 5, maxRows: 8}"
          />
        </a-form-model-item>
        <a-form-model-item label="例子" prop="example">
          <a-textarea
            v-model="messageFor"
            placeholder="例子"
            style="width: 100%"
            class="input-type-o"
            disabled
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
        </a-form-model-item>

      </a-form-model>
    </a-modal>

  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import rowClass from '@/pages/common/rowClass';
import { priorityList } from '@/pages/common/constant.js';
// import { modifierArr } from '@/pages/common/constant.js';
import airModel from '@/pages/components/airModel';

export default {
  components: {
    airModel

  },
  mixins: [rowClass],
  data() {
    return {
      priorityList,
      search: {},
      // modifierArr,
      addVisible: false,
      addForm: {},
      addTitle: '新增',
      addRules: Object.freeze({
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        model: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        modifier: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        // configId: [
        //   { required: true, message: '请选择', trigger: 'change' }
        // ],
        // example: [
        //   { required: true, message: '请选择', trigger: 'change' }
        // ],
        message: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        smi: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }),
      columns: Object.freeze([
        {
          title: '名称',
          align: 'left',
          dataIndex: 'name',
          customRender: (value, record) => {
            return [
              <div>{value || '--'}</div>,
              <div class='mt-4'><span>{record.createBy}</span> <span>{this.$moment.utc(record.updateTime).format('YYYY-MM-DD')}</span></div>
            ];
          }
        },
        {
          title: '机型',
          align: 'left',
          dataIndex: 'model',
          customRender: (value) => {
            return value || '--';
          }

        },
        {
          title: '配置ID',
          align: 'left',
          dataIndex: 'configId',
          customRender: (value) => {
            return value || '--';
          }

        },
        {
          title: '上传样例',
          align: 'left',
          dataIndex: 'example',
          customRender: (value) => {
            return [<pre class='mb-0'>{value || '--'}</pre>];
          }
        },
        {
          title: '修改人',
          align: 'left',
          dataIndex: 'updateBy',
          customRender: (value) => {
            return value || '--';
          }

        },
        {
          title: '修改时间',
          align: 'left',
          dataIndex: 'updateTime',
          customRender: (value) => {
            return value ? this.$moment.utc(value) : '--';
          }

        },
        {
          title: '操作',
          align: 'left',
          dataIndex: 'op',
          width: 120,
          customRender: (value, record) => {
            return [
              <a-button type='link' onClick={() => this.editEventHandler(record)}>
                  编辑
              </a-button>,
              <a-popconfirm
                title='确认删除此项?'
                ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delItemHandler(record)}
              >
                <a-button type='link' class='mr-5'>删除</a-button>
              </a-popconfirm>
            ];
          }

        }
      ])

    };
  },
  computed: {
    ...mapState('repUplinkRequest', [
      'listByParamList',
      'listByParamLoading',
      'addRepUplinkDestinationLoading',
      'paginationOptions'
    ]),
    ...mapState('templateManagement', [
      'firstClassClassificationList'
    ]),
    messageFor() {
      const smi = this.addForm.smi ? this.addForm.smi + '\n' : '';

      const msg = this.addForm.message ? this.addForm.message : '';
      const tm = this.addForm.message ? 'AN .{TailNo}\n- ' : '';
      // const modifier = modifierArr.find(item => item.name === this.addForm?.modifier)?.format ?? '';

      // if (this.addForm.smi === 'ENG') {
      //   return smi + msg + modifier;
      // } else {
      //   return smi + msg;
      // }
      return smi + tm + msg;
    },
    ...mapGetters('setting', ['sideMenuWidth'])
  },
  mounted() {
    this.getSmiList();
    this.getData();
  },
  methods: {
    ...mapMutations('repUplinkRequest', [
      'setState'
    ]),
    ...mapActions('repUplinkRequest', [
      'getListByParam',
      'addRepUplinkDestination',
      'deleteRepUplinkRequest',
      'updateRepUplinkRequest'
    ]),
    ...mapActions('templateManagement', [
      'getSmiList'
    ]),

    changeTable({ current, pageSize = 10 }) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }
      this.setState({ key: 'paginationOptions', payload: { ...this.paginationOptions, pageNum: current, pageSize }});
      this.getData();
    },

    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addForm['example'] = this.messageFor;
          if (this.addForm.id) {
            this.updateRepUplinkRequest(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          } else {
            this.addRepUplinkDestination(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.changeTable({ current: 1 });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelHandler() {
      this.addForm = {};
      this.addTitle = '新增';
      this.$refs.addForm.resetFields();
    },
    goBackFm() {
      this.$router.push({ name: this.$route.query.bc, params: { m: 'messageUploadVisible' }});
    },
    // 编辑
    editEventHandler(row) {
      this.addVisible = true;
      this.addForm = { ...row };
      this.addTitle = '修改';
    },
    // 确认删除
    delItemHandler({ id }) {
      this.deleteRepUplinkRequest({ id }).then((rep) => {
        if (rep) {
          this.getData();
        }
      });
    },
    // 重置
    resetSearchHandler() {
      this.search = {};
      this.changeTable({ current: 1 });
    },
    getData() {
      this.getListByParam(this.search);
    }
  }
};
</script>

<style>

</style>
